<!-- 支付弹框组件 -->
<template>
	<!-- 支付弹框 -->
	<view class="pay-pop" v-if="showPay" @tap.stop>
		<view class="pay-cont">
			<view class="pay-head">
				<i class="iconfont1 iconguanbi pay-head-i" @tap="closePop"></i>
				<view class="pay-head-text">确认支付</view>
			</view>
			<view class="pay-n">¥{{ realPay | price_filter }}</view>
			<view class="pay-pattern">选择付款方式</view>
			<scroll-view scroll-y class="bank-card-box">
				<view class="row4_item" v-for="(item, index) in items" :key="index" @tap="changeType(index, item.value)">
					<view class="row4_item_letf">
						<i :class="item.class"></i>
						<text>{{ item.text }}</text>
					</view>
					<i class="iconfont" :class="[change == index ? 'iconduigou' : '']"></i>
				</view>
				<!-- <navigator hover-class="false" class="row4_item" url="addBankcard">
					<view class="row4_item_letf">
						<i class="iconfont iconyinhangka icon-styl4"></i>
						<text class="addCard">添加银行卡</text>
					</view>
					<view class="row4_item_rgith"><i class="iconfont iconjiantou icon-styl5"></i></view>
				</navigator> -->
			</scroll-view>
			<view class="pay-btn" @tap="confirm">确认付款</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		realPay: Number
	},
	data() {
		return {
			items: [
				// {
				// 	class: 'iconfont iconyue-mian icon-styl0',
				// 	text: '账户余额',
				// 	value: 0
				// },
				// {
				// 	class: 'iconfont iconzhifubao icon-styl1',
				// 	text: '支付宝支付',
				// 	value: 1
				// },
				{
					class: 'iconfont iconweixinzhifu icon-styl2',
					text: '微信支付',
					value: 'wx'
				},
				// {
				// 	class: 'iconfont iconjiachang icon-styl3',
				// 	text: '家长代付',
				// 	value: 3
				// }
			],
			change: 0,
			payType: 'wx',
			showPay: false,
		};
	},
	filters:{
		price_filter(v){
			return v && (v).toFixed(2)
		}
	},
	methods: {
		goPay(data) {
			this.showPay = true;
		},
		closePop() {
			this.showPay = false;
		},
		confirm(){
			this.closePop()
			this.$emit('pay_order',{payType:this.payType})
		},
		/* 切换支付类型 */
		changeType(index, value) {
			this.change = index;
			this.payType = value;
		}
	}
};
</script>

<style>
.pay-pop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
.pay-cont {
	position: absolute;
	z-index: 9999;
	bottom: 0;
	width: 750upx;
	height: 780upx;
	background-color: #ffffff;
}

.pay-head {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2upx solid rgba(229, 229, 229, 0.5);
	padding-left: 30upx;
	padding-right: 30upx;
	height: 87upx;
}
.pay-head-i {
	position: absolute;
	color: #999999;
	line-height: 90upx;
	font-size: 35upx;
	left: 30upx;
}
.pay-head-text {
	font-size: 36upx;
	color: #333333;
}
.pay-n {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 66upx;
	height: 104upx;
	margin-top: 20upx;
	color: #333333;
}
.pay-pattern {
	font-size: 34upx;
	color: #999999;
	padding: 20upx 0 20upx 30upx;
	border-bottom: 2upx solid rgba(229, 229, 229, 1);
}

.bank-card-box {
	height: 306upx;
}
.row4_item {
	width: 690upx;
	padding: 0 30upx;
	height: 100upx;
	line-height: 100upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2upx solid rgba(229, 229, 229, 1);
}
.row4_item_letf {
	display: flex;
	justify-content: flex-start;
	height: 100upx;
	line-height: 100upx;
}
.row4_item_letf text {
	color: #333333;
	font-size: 34upx;
}
.row4_item_letf .iconfont {
	font-size: 40upx;
	line-height: 100upx;
	margin-right: 16upx;
}
.icon-styl0 {
	color: #ffb800;
}
.icon-styl1 {
	color: #1296db !important;
}
.icon-styl2 {
	color: #41b035 !important;
}
.icon-styl3 {
	color: #FF9900;
}
.icon-styl4 {
	color: #2f77f1;
}
.icon-styl5 {
	color: #999999;
	display: inline-flex;
	line-height: 98upx !important;
}
.iconduigou {
	color: #FF9900;
	font-size: 36upx;
	line-height: 100upx;
}
.pay-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40upx;
	width: 690upx;
	height: 80upx;
	background-color: #FF9900;
	color: #ffffff;
	font-size: 34upx;
	border-radius: 8upx;
}
</style>
